<!DOCTYPE html>
<html>
<head>
    {include file="../application/common/header.html" /}
    <style type="text/css">
        .ab{
            width: 45%;
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
            list-style: none;
            padding: 10px;
        border: 1px solid #847d7d;
        border-radius: 5px;
        height: 280px;
        }
    </style>
    <script src="__STATIC__/js/echarts-3.8.4.js"></script>
</head>

<body style="background: #fff;">
            <div class="ab" id="a1"></div>
            <div class="ab" id="a2"></div>
            <div class="ab" id="a3"></div>
            <div class="ab" id="a4"></div>
    
    <script type="text/javascript">
        a1();
        a2();
        a3();
        a4();
        function a1(){
            var myChart = echarts.init(document.getElementById('a1'));
            

            var data = [];
            var now = +new Date(2020, 9, 3);
            var oneDay = 24 * 3600 * 1000;
            var value = Math.random() * 1000;
            for (var i = 0; i < 1000; i++) {
                data.push(randomData());
            }
            function randomData() {
                now = new Date(+now + oneDay);
                value = value + Math.random() * 21 - 10;
                return {
                    name: now.toString(),
                    value: [
                        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                        Math.round(value)
                    ]
                };
            }
            option = {
                title: {
                    text: '系统访问统计'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        params = params[0];
                        var date = new Date(params.name);
                        return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                    },
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    name: '模拟数据',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: data
                }]
            };

            setInterval(function () {

                for (var i = 0; i < 5; i++) {
                    data.shift();
                    data.push(randomData());
                }

                myChart.setOption({
                    series: [{
                        data: data
                    }]
                });
            }, 1000);
            myChart.setOption(option);
        }
        
        function a2() {
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['待审批', '已审批', '已完成']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['教师请假', '学生请假', '公文审批', '故障报修', '功能室申请', '工作审批']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '待审批',
                        type: 'bar',
                        stack: '广告',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [20, 32, 51,20, 32, 30]
                    },
                    {
                        name: '已审批',
                        type: 'bar',
                        stack: '广告',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [20, 32, 31,20, 32, 30]
                    },
                    {
                        name: '已完成',
                        type: 'bar',
                        stack: '广告',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [20, 32, 21,20, 32, 30]
                    }
                ]
            };
            var myChart = echarts.init(document.getElementById('a2'));
            myChart.setOption(option);
        }
        function a3() {
            option = {
                title: {
                    text: '学生布控',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1200, name: '在校学生'},
                            {value: 20, name: '离校学生'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            var myChart = echarts.init(document.getElementById('a3'));
            myChart.setOption(option);
        }
        function a4() {
            option = {
                title: {
                    text: '教师布控',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 230, name: '在校教师'},
                            {value: 8, name: '事假离校'},
                            {value: 10, name: '外出学习'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            var myChart = echarts.init(document.getElementById('a4'));
            myChart.setOption(option);            
        }
    </script>
</body>
</html>